Formation Concevoir des animations SVG
Concevoir des animations SVG
La formation « Concevoir des animations SVG » vous permettra de réaliser des animations multimédia interactives riches et les publier dans un site Web en utilisant principalement le langage HTML5 / Canva / SVG. Le programme est donné à titre indicatif et sera adapté à vos besoins et votre niveau après audit. N’hésitez pas à nous contacter pour toute demande spécifique.
En résumé
Distanciel
Présentiel
Pré-requis
Avoir une bonne connaissance de la création de page Web (HTML et CSS). Avoir des notions de base JavaScript. Maitriser un logiciel de dessin vectoriel (Illustrator, Inkscape...) est un plus.
Public concerné
Tout public
Durée et tarif de la formation
La durée de la formation varie en fonction des besoins et des objectifs déterminés après audit. Les tarifs sont disponibles sur devis.
Lieux
Formation intra-entreprise au sein de votre établissement ou dans nos locaux de LA ROCHELLE (Charente-Maritime), NIORT (Deux-Sèvres) ou POITIERS (Vienne)
Téléchargement
Télécharger le programme de formation au format PDF
Contenu de la formation
- Matriciel vs Vectoriel : différences et usages
- Insertion dans une page HTML : fichiers externes, inline SVG
- Data URI : usage limité, quand l’utiliser ou l’éviter
- SVG vs Canvas : avantages et limites
- Déclaration vs programmation
- Intérêt du DOM SVG
- Les modes d'insertion dans une page HTML
- Outils graphiques : Illustrator, Inkscape (optimisation des exports pour le web)
- Déclaration XML et ViewBox
- Formes simples : lignes, rectangles, ellipses
- Formes complexes : polygones, lignes polygonales
- Filtres SVG : usage et bonnes pratiques
- Texte en ligne et
- Propriétés CSS appliquées au texte
- Alignement, décalage et rotation
- Module transition et module animation
- Définir les étapes avec @keyframes
- Points d’origine et transformations (translate, rotate, scale)
- Pseudo-classes et déclenchement via interactions
- Écoute des événements d’animation avec JavaScript
- Scripts internes et externes
- Gestion des événements et fonctions
- Manipulation des attributs SVG pour animer des formes
- SMIL (, , ) : à éviter pour les nouveaux projets, car support limité.
- Attributs de présentation vs propriétés CSS
- Ordre d’application des styles
- Gestion des scripts et styles dans ou dans la page
- D3.js : datavisualisation et manipulation avancée du DOM SVG
- Snap.svg : animations simples et interactives
- GreenSock (GSAP) : animations complexes et performantes
- SVGator : animations sans coder